<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu ref="Menu" @on-select="select" mode="horizontal" theme="light" :active-name="active_name">
          <div class="layout-logo"></div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              首页
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-navigate"></Icon>
              在线加密
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-keypad"></Icon>
              图片攻击
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-analytics"></Icon>
              在线解密
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Content class="content" :style="{padding: '0 50px'}">
        <div class="mdui-text-center">
          <h1>{{ current_name }}</h1>
        </div>
        <choose v-if="active_name==='1'" @change="change"></choose>
        <encryption v-else-if="active_name==='2'" class="choose"></encryption>
        <attack v-else-if="active_name==='3'" class="choose"></attack>
        <decrypt v-else-if="active_name==='4'" class="choose"></decrypt>
      </Content>
      <!--      <Footer class="layout-footer-center">2011-2016 &copy; View Design</Footer>-->
    </Layout>
  </div>
</template>

<script>

import Choose from "@/components/choose";
import Encryption from "@/components/encryption";
import Attack from "@/components/attack";
import Decrypt from "@/components/decrypt";

export default {
  name: "Demo",
  components: {Decrypt, Attack, Encryption, Choose},
  data() {
    return {
      current_name: "热门转换",
      name: {
        "1": "热门转换",
        "2": "在线加密",
        "3": "图片攻击",
        "4": "在线解密"
      },
      choose: -1,
      active_name: '1'
    };
  },
  watch: {
    active_name(newQuestion, oldQuestion) {
      this.current_name=this.name[newQuestion]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.Menu.updateOpened()
      this.$refs.Menu.updateActiveName()
    })
  },
  computed: {},
  methods: {
    change(e) {
      this.active_name = e
    },
    select(e) {
      this.active_name = e
    }
  },
};
</script>

<style lang="less" scoped>
.main-content {
  padding: 10px;
}

.mdui-text-center {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.mdui-text-center h1 {
  font-weight: 300;
  font-size: 46px;
}


.layout {
  //border: 1px solid #d7dde4;
  background-color: #fff;
  position: relative;
  border-radius: 4px;
  //overflow: hidden;

}

.layout-logo {
  width: 150px;
  height: 50px;
  //border-radius: 3px;
  float: left;
  position: relative;
  top: 5px;
  left: 100px;
  background-image: url("../assets/img.png");
  background-repeat: no-repeat;
  background-size: 100% 100%
}


.layout-nav {
  width: 500px;
  margin: 0 auto;
  margin-right: 20px;
}

.layout-footer-center {
  text-align: center;
  background-color: #fff;
}

.layout .ivu-layout-header {
  background-color: #fff;
  padding: 0;
}

.layout-topMiddleBottom .ivu-menu-light {
  background: none;
  color: #fff
}

.content {
  background-color: #fff;
  height: calc(100vh - 120px)
}


.choose {
  width: 60%;
  //display: flex;
  margin: 0 auto;
}

//.ivu-form-item-content {
//  display: flex;
//  justify-content: center;
//  align-items: center;
//}
//
//.imgContainer {
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  margin: 40px 0 0 0;
//}
//
//.imgDisplay {
//  z-index: 3;
//  width: 400px;
//}
//
//.imgHeader {
//  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
//  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
//
//  color: #464c5b;
//  font-size: 14px;
//}
//
//
//
//.number {
//  margin: 20px 0 0 0;
//  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
//  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
//  display: block;
//  width: 100%;
//  text-align: left;
//  color: #464c5b;
//  font-size: 16px;
//}
//
//.downloadButton {
//  margin-left: 50px;
//}
</style>
